import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import { Button, Form, Input } from "antd";
import { getUrlParam } from './actions/weixin'
import { TipPage } from './TipPage';
import VerificationCode from "@common/presentational/VerificationCode";
const FormItem = Form.Item;
import { connect } from "react-redux";
import { getQuery } from "@utils/setUrlQuery";
import { getInviteEmpInfo, getWeixinConfig, getUserOpenId, joinEmployee } from "@sagas/employee";
import { loaderWeiXinSDK, wxConfig, redirectFunc, closeWxWindow } from '@pages/mobile/actions/weixin'
@connect(null, {
    joinEmployee,
    getInviteEmpInfo,
    getWeixinConfig,
    getUserOpenId
})
@withRouter
class EmployeeJoin extends PureComponent {
    constructor(props) {
        super(props);
        const { token } = getQuery(props)
        this.state = {
            token,
            name: '',
            mobile: '',
            role_name: '',
            joinSuccess: false
        }
        this.formRef = React.createRef()
        this.getDataInfo = this.getDataInfo.bind(this)
        this.submitForm = this.submitForm.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    submitForm() {
        this.formRef.current?.submit()
    }

    handleSubmit(values) {
        const { token, openId } = this.state
        const { joinEmployee } = this.props;
        joinEmployee({
            shareToken: token,
            openId,
            code: values.code,
            code_type: 'join'
        }, (res) => {
            this.setState({
                joinSuccess: true
            })
        })
    }

    componentDidMount() {
        document.title = '邀请加入'
        document.querySelector('body').setAttribute('style', 'min-width: 100vw')
        const url = window.location.href;
        const code = getUrlParam('code');
        const { token } = this.state
        const that = this;
        loaderWeiXinSDK(() => {
            this.props.getWeixinConfig({
                url: decodeURIComponent(url)
            }, res => {
                const { app_id } = res;
                if (!code) {
                    const url = `${window.location.origin}/employee/join?token=${token}`;
                    redirectFunc(app_id, url);
                    return;
                }
                this.props.getUserOpenId({ code }, data => {
                    console.log(data)
                    // 获取 openid 失败
                    if (!data.open_id) {
                        const url = `${window.location.origin}/employee/join?token=${token}`;
                        redirectFunc(app_id, url);
                        return;
                    }
                    that.setState({
                        openId: data.open_id,
                    });
                    that.getDataInfo();
                })
                wxConfig(res, ['closeWindow']);
            })
        })
    }

    getDataInfo() {
        const { token } = this.state
        const { getInviteEmpInfo } = this.props
        const that = this;
        getInviteEmpInfo({
            shareToken: token
        }, res => {
            that.setState({
                name: res.name,
                mobile: res.mobile,
                role_name: res.role_name,
            })
        })

    }

    render() {
        const { name, mobile, role_name, joinSuccess } = this.state
        if (joinSuccess) {
            return (
                <TipPage type="success" message="成功加入" action={closeWxWindow} />
            )
        }
        return (
            <div className="bilin-web-mobile">
                <div className="ft-clr-d ft-14 mgb-12">已创建的员工信息如下</div>
                <div className="base-info-item">
                    <div className="item-label ft-clr-d">姓名：</div>
                    <div className="item-value ft-clr-md">{name}</div>
                </div>
                <div className="base-info-item">
                    <div className="item-label ft-clr-d">手机号</div>
                    <div className="item-value ft-clr-md">{mobile}</div>
                </div>
                <div className="base-info-item">
                    <div className="item-label ft-clr-d">权限</div>
                    <div className="item-value ft-clr-md">{role_name}</div>
                </div>
                <Form
                    ref={this.formRef}
                    name="mobile-register"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={this.handleSubmit}
                >
                    <div className="code-value-with-button">
                        <Form.Item
                            name='code'
                            rules={[
                                { required: true, message: '请输入验证码', },
                            ]}
                        >
                            <VerificationCode codeType="join" mobileNumber={mobile} />
                        </Form.Item>
                    </div>
                    <Button type="primary"
                        className='button-green'
                        onClick={this.submitForm}
                    >确认加入</Button>
                </Form>
            </div>
        )
    }
}

export default EmployeeJoin